<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta CONTENT="no-cache" HTTP-EQUIV="pragma">
    <meta CONTENT="no-cache, must-revalidate" HTTP-EQUIV="Cache-Control">
    <meta CONTENT="0" HTTP-EQUIV="expires">
    <title>首页</title>
    <link href="../../css/element.css" rel="stylesheet">
    <link href="../../css/base.css" rel="stylesheet">
</head>
<body>
<div id="wrapper" v-cloak>
    <div style="padding-bottom: 10px">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item @click.native="parent.changeIndex('index')">首页</el-breadcrumb-item>
            <el-breadcrumb-item>下单管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div style="height: 1px; margin: 10px 0; background-color: white"></div>

    <div style="margin: 10px 0">
        <el-input placeholder="请输入关键字搜索" style="width: 20%;" suffix-icon="el-icon-search"
                  v-model="search"></el-input>
        <el-button @click="loadTable" style="margin: 10px 0" type="primary">查询</el-button>
        <el-button @click="add" style="margin: 10px 0" type="primary">新增</el-button>
    </div>

    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column label="商品名称" prop="name"></el-table-column>
        <el-table-column label="地址" prop="address"></el-table-column>
        <el-table-column label="手机号" prop="phone"></el-table-column>
        <el-table-column label="留言" prop="issue"></el-table-column>
        <el-table-column label="下单数量" prop="orderAmount"></el-table-column>
        <el-table-column label="下单金额" prop="sumMoney"></el-table-column>
        <el-table-column label="下单时间" prop="createTime"></el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="150">
            <template slot-scope="scope">
                <el-button @click="edit(scope.row)" circle icon="el-icon-edit" type="primary"></el-button>
                <el-popconfirm
                        @onConfirm="del(scope.row.id)"
                        title="确定删除？"
                >
                    <el-button circle icon="el-icon-delete" slot="reference" type="danger"></el-button>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div style="background-color: white; padding: 10px 0">
        <el-pagination
                :current-page="pageNum"
                :page-size="pageSize"
                :page-sizes="[5, 10, 20, 40]"
                :total="total"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    </div>

    <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="用户信息"
               width="40%">
        <el-form :model="entity">
            <el-form-item label="商品名称" label-width="100px">
                <el-input autocomplete="off" style="width: 80%" v-model="entity.name"></el-input>
            </el-form-item>
            <el-form-item label="地址" label-width="100px">
                <el-input autocomplete="off" style="width: 80%" v-model="entity.address"></el-input>
            </el-form-item>
            <el-form-item label="手机号" label-width="100px">
                <el-input autocomplete="off" style="width: 80%" v-model="entity.phone"></el-input>
            </el-form-item>
            <el-form-item label="留言" label-width="100px">
                <el-input autocomplete="off" style="width: 80%" v-model="entity.issue"></el-input>
            </el-form-item>
            <el-form-item label="购买数量" label-width="100px">
                <el-input autocomplete="off" style="width: 80%" v-model="entity.orderAmount"></el-input>
            </el-form-item>
            <el-form-item label="购买金额" label-width="100px">
                <el-input autocomplete="off" style="width: 80%" v-model="entity.sumMoney"></el-input>
            </el-form-item>
            <el-form-item label="下单时间" label-width="100px">
                <el-input autocomplete="off" style="width: 80%" v-model="entity.createTime"></el-input>
            </el-form-item>

        </el-form>
        <div class="dialog-footer" slot="footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button @click="save" type="primary">确 定</el-button>
        </div>
    </el-dialog>
</div>

<script src="../../js/jquery.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/element.js"></script>
<script src="../../js/tinymce/tinymce.min.js"></script>


<script>

    let urlBase = "/ordermessage/";
    new Vue({
        el: "#wrapper",
        data: {
            user: {},
            tableData: [],
            pageNum: 1,
            pageSize: 5,
            total: 0,
            dialogFormVisible: false,
            entity: {},
            isCollapse: false,
            search: '',
            Begin: false,
            options: [],
            props: [{"label": "用户名", "prop": "username"}, {"label": "邮箱", "prop": "email"}, {
                "label": "电话",
                "prop": "phone"
            }]
        },
        created() {
            this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
            this.loadTable();
        },
        methods: {
            changeRole(row) {
                this.entity = JSON.parse(JSON.stringify(row));
                this.save();
            },
            handleCollapse() {
                this.isCollapse = !this.isCollapse;
            },
            logout() {
                // 请求退出接口
                $.get("/api/user/logout");
                localStorage.removeItem("user");
                location.href = "/page/end/login.html";
            },
            loadTable() {
                this.total = 50;
                $.get(urlBase + "page?&a=" + this.pageNum + "&b=" + this.pageSize).then(res => {
                    this.total = res[1];
                    this.tableData = res[0];
                })

                $.get(urlBase + "list").then(res => {
                    this.options = res;
                })
            },
            exp() {
                window.open(urlBase + "/export");
            },
            handleSizeChange(pageSize) {
                this.pageSize = pageSize;
                this.loadTable();
            },
            handleCurrentChange(pageNum) {
                this.pageNum = pageNum;
                this.loadTable();
            },
            add() {
                this.Begin = true
                this.entity = {};
                this.dialogFormVisible = true;
            },
            save() {
                if (this.Begin === true) {
                    $.ajax({
                        url: urlBase + "add",
                        type: "post",
                        contentType: "application/json",
                        data: JSON.stringify(this.entity)
                    }).then(res => {
                        if (res === true) {
                            this.$message({
                                message: "添加成功",
                            });
                            this.loadTable();
                        } else {
                            this.$message({
                                message: "添加失败",
                            })
                            this.loadTable();
                        }
                    })
                } else {
                    $.ajax({
                        url: urlBase + "update",
                        type: "post",
                        contentType: "application/json",
                        data: JSON.stringify(this.entity)
                    }).then(res => {
                        if (res === true) {
                            this.$message({
                                message: "修改成功",
                            });
                            this.loadTable();
                        } else {
                            this.$message({
                                message: "修改失败",
                            })
                            this.loadTable();
                        }
                    })
                }
                this.dialogFormVisible = false;
            },
            edit(obj) {
                this.entity = JSON.parse(JSON.stringify(obj));
                this.dialogFormVisible = true;
            },
            del(id) {
                $.ajax({
                    url: urlBase + "delete/" + id,
                    type: "get"
                }).then(res => {
                    if (res) {
                        this.$message({
                            message: "删除成功",
                        })
                        this.loadTable();
                    } else {
                        this.$message({
                            message: "删除失败",
                        })
                        this.loadTable();
                    }
                })
            }
        }
    })
</script>
</body>
</html>
